<template>
    <view class="license-plate-container">
        <view class="plate-input-area">
            <view class="plate-boxes">
                <!-- 省份输入框 -->
                <view class="plate-box province" :class="{ active: currentIndex === 0 }" @tap="focusInput(0)">
                    {{ plateNumber[0] || '' }}
                    <view class="cursor" v-if="currentIndex === 0"></view>
                </view>
                <!-- 第一位号码输入框 -->
                <view class="plate-box" :class="{ active: currentIndex === 1 }" @tap="focusInput(1)">
                    {{ plateNumber[1] || '' }}
                    <view class="cursor" v-if="currentIndex === 1"></view>
                </view>
                <!-- 中间点 -->
                <view class="plate-dot">•</view>
                <!-- 剩余号码输入框 -->
                <view v-for="index in [2,3,4,5,6]" :key="index" class="plate-box" :class="{ active: currentIndex === index }"
                    @tap="focusInput(index)">
                    {{ plateNumber[index] || '' }}
                    <view class="cursor" v-if="currentIndex === index"></view>
                </view>
                <!-- 新能源标识 -->
                <view class="plate-box new-energy" :class="{ active: isNewEnergy, selected: plateNumber[7] }"
                    @tap="focusInput(7)">
                    {{ plateNumber[7] || '新能源' }}
                    <view class="cursor" v-if="currentIndex === 7"></view>
                </view>
            </view>
        </view>
        <!-- 键盘部分 -->
        <view class="keyboard" v-if="showKeyboard" :class="{ 'keyboard-show': showKeyboard }">
            <!-- 省份选择键盘 -->
            <template v-if="currentIndex === 0">
                <view class="keyboard-header">
                    <u-icon name="arrow-down" color="#333333" size="20" bold @tap="closeKeyboard"></u-icon>
                </view>
                <view class="keyboard-content">
                    <view class="province-grid">
                        <view v-for="province in provinces" :key="province" class="province-item"
                            hover-class="item-hover" @tap="selectProvince(province)">
                            {{ province }}
                        </view>
                        <view class="province-item confirm-key" @tap="closeKeyboard">完成</view>
                    </view>
                </view>
            </template>

            <!-- 字母数字键盘 -->
            <template v-else>
                <view class="keyboard-header">
                    <u-icon name="arrow-down" color="#333333" size="20" bold @tap="closeKeyboard"></u-icon>
                </view>
                <view class="keyboard-content">
                    <!-- 特殊字符区域 - 只在第6位可用 -->
                    <view class="key-row">
                        <view v-for="char in ['港', '澳', '学', '警', '领']" :key="char" class="key-item"
                            :class="{ 'disabled': currentIndex !== 6 }" @tap="currentIndex === 6 && selectChar(char)">
                            {{ char }}
                        </view>
                    </view>

                    <!-- 数字键盘 -->
                    <view class="key-row">
                        <view v-for="num in '1234567890'" :key="num" class="key-item"
                            :class="{ 'disabled': currentIndex === 1 }" @tap="currentIndex !== 1 && selectChar(num)">
                            {{ num }}
                        </view>
                    </view>

                    <!-- 字母键盘 -->
                    <view class="key-row">
                        <view v-for="letter in 'QWERTYUIOP'" :key="letter" class="key-item" @tap="selectChar(letter)">
                            {{ letter }}
                        </view>
                    </view>
                    <view class="key-row">
                        <view v-for="letter in 'ASDFGHJKL'" :key="letter" class="key-item" @tap="selectChar(letter)">
                            {{ letter }}
                        </view>
                        <view class="key-item delete-key" @tap="deleteChar">
                            <!-- <image src="/static/images/icon_del.svg"></image> -->
                        </view>
                    </view>
                    <view class="key-row">
                        <view v-for="letter in 'ZXCVBNM'" :key="letter" class="key-item" @tap="selectChar(letter)">
                            {{ letter }}
                        </view>
                        <view class="key-item confirm-key" @tap="closeKeyboard">
                            完成
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        licensePlate: {
            type: String,
            default: ''
        }
    },
    watch: {
        licensePlate: {
            handler(newVal) {
                this.plateNumber = newVal.split('')
            },
            immediate: true
        }
    },
    data() {
        return {
            plateNumber: ['', '', '', '', '', '', '', ''],
            currentIndex: -1,
            showKeyboard: false,
            isNewEnergy: false,
            provinces: ['京', '沪', '浙', '苏', '粤', '鲁', '晋', '冀', '豫', '川', '渝',
                '辽', '吉', '黑', '皖', '鄂', '湘', '赣', '闽', '陕', '甘', '宁',
                '蒙', '津', '贵', '云', '桂', '琼', '青', '新', '藏', '港', '澳'],
            firstRow: 'QWERTYUIOP'.split(''),
            secondRow: 'ASDFGHJKLZ'.split(''),
            thirdRow: 'XCVBNM'.split('')
        }
    },
    methods: {
        focusInput(index) {
            this.currentIndex = index
            this.showKeyboard = true
            if (index === 7) {
                this.isNewEnergy = true
            } else {
                this.isNewEnergy = false
            }
        },
        selectProvince(province) {
            this.plateNumber[0] = province
            this.currentIndex = 1
            // this.closeKeyboard()
        },
        selectChar(char) {
            // 第二位只允许输入字母
            if (this.currentIndex === 1 && /[0-9]/.test(char)) {
                return
            }

            // 特殊字符只允许在第6位输入
            if (['港', '澳', '学', '警', '领'].includes(char) && this.currentIndex !== 6) {
                return
            }

            this.plateNumber[this.currentIndex] = char
            // 恢复自动前进到下一位的逻辑
            if (this.currentIndex < 7) {
                this.currentIndex++
            } else {
                this.closeKeyboard()
            }
        },
        closeKeyboard() {
            this.showKeyboard = false
            this.currentIndex = -1
            this.isNewEnergy = false
            this.$emit('closeKeyboard',this.plateNumber)
        },
        deleteChar() {
            if (this.currentIndex >= 0) {
                // 如果当前位置为空且不是第一位，则移动到前一位并删除
                if (this.plateNumber[this.currentIndex] === '' && this.currentIndex > 0) {
                    this.currentIndex--
                    this.plateNumber[this.currentIndex] = ''
                } else {
                    // 直接删除当前位置的值，并移动到上一位
                    this.plateNumber[this.currentIndex] = ''
                    if (this.currentIndex > 0) {
                        this.currentIndex--
                    }
                }
                this.isNewEnergy = false
            }
        },
    }
}
</script>

<style scoped>
/* .license-plate-container {
    padding: 30rpx;
    background-color: #FFFFFF;
} */

.title {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 40rpx;
}

/* .plate-input-area {
    margin-bottom: 40rpx;
    background: #F8F9FA;  浅灰色背景
    padding: 30rpx;
    border-radius: 12rpx;
} */

.plate-boxes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rpx;
}

.plate-box {
    position: relative;
    width: 60rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    border-radius: 8rpx;
    background: #FFFFFF;
    box-shadow: 0 0 8rpx rgba(108, 117, 125, 0.2);
}

.plate-box.province {
    background: #F8F9FA;
    width: 80rpx;
}

.plate-dot {
    font-size: 36rpx;
    color: #999;
    display: flex;
    align-items: center;
    padding: 0 2rpx;
}

.plate-box.active {
    border: 2rpx solid #FF4250;
}

.new-energy {
    background: #D9FFEC;
    color: #3DD388;
    font-size: 24rpx;
    width: 90rpx;
}


.new-energy.selected {
    background: #D9FFEC;
    color: #333333;
    font-size: 36rpx;
}

.keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #E5E6EB;
    padding: 20rpx 15rpx;
    border-radius: 20rpx 20rpx 0 0;
    z-index: 999;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.keyboard-header {
    padding: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* border-bottom: 1rpx solid #eee; */
}

.keyboard-content {
    padding: 10rpx;
}

.key-row {
    display: flex;
    justify-content: center;
    gap: 8rpx;
    margin-bottom: 8rpx;
}

.key-item {
    flex: 1;
    height: 88rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    margin: 4rpx;
    border: none;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}

.delete-key {
    background-image: url('https://henanhanyong1995.oss-cn-hangzhou.aliyuncs.com/WeChatUploadImg/icon_del.svg');
    background-size: 40rpx 40rpx;
    background-repeat: no-repeat;
    background-position: center;
}


/* .confirm-key {
    flex: none;
    background: #FF4D4F;
    color: #FFFFFF;
} */

.province-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8rpx;
    padding: 10rpx;
}

.province-item {
    height: 88rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333333;
    margin: 4rpx;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
    border: none;
}

/* 特殊字符区域样式优化 */
.key-row:first-child {
    margin-bottom: 12rpx;
}

.key-item.disabled {
    color: #F0F0F0;
}

/* 按键点击效果 */
.key-item:active {
    opacity: 0.8;
    background: #F5F5F5;
}

.close-btn {
    font-size: 40rpx;
    color: #999;
    padding: 0 20rpx;
}

/* 光标样式 */
.cursor {
    position: absolute;
    right: 4rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 2rpx;
    height: 40rpx;
    background-color: #FF4250;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.item-hover {
    background: #f0f0f0;
}

/* 省份键盘的完成按钮样式 */
.province-grid .confirm-key {
    background: #FF4D4F;
    color: #FFFFFF;
    /* 修改网格占位，让按钮与上面对齐 */
    grid-column: 6 / span 2;  /* 从第6列开始，跨度2列 */
    grid-row: 5;             /* 放在最后一行 */
    margin: 4rpx;
    width: auto;             /* 移除固定宽度 */
    height: 88rpx;           /* 保持与其他按钮一样的高度 */
}

/* 添加悬停效果 */
.province-grid .confirm-key:active {
    opacity: 0.8;
    background: #ff6b6b;
}

/* 最后一行的布局 */
.key-row:last-child {
    display: flex;
    justify-content: space-between;
    gap: 8rpx;
}

/* 完成按钮样式修改 */
.key-row:last-child .confirm-key {
    flex: 3.5;
    background: #FF4D4F;
    color: #FFFFFF;
    border-radius: 8rpx;
    font-size: 28rpx;  /* 稍微调小字体 */
    font-weight: normal;  /* 调整字重 */
}

/* 完成按钮点击效果 */
.key-row:last-child .confirm-key:active {
    opacity: 0.8;
    background: #ff6b6b;
}
</style>
